<template>
  <el-row :gutter="15">
    <el-col v-bind="styleResponsive ? { lg: 24 } : { span: 24 }">
      <el-card shadow="never"
               :body-style="{ height: '302px', minWidth: '311px' }"
               style="overflow: auto"
               header="技师收益排行">
        <div class="ele-cell ele-cell-align-bottom"> </div>
        <div class="ele-cell flex-around">
          <span>排行/名字</span> <span></span> <span>提现金额</span><span>收益金额</span>
        </div>
        <div class="ele-cell"
             v-for="(item, i) in yhtjIncomeList"
             :key="i">
          <div style="width: 80px; white-space: nowrap"
               class="ele-text-secondary">
            <div class="flex">
              <span :class="[i == 0 ? 'one' : 'two', i == 1 ? 'two' : 'other']"
                    style="margin-left: 30px">{{ i + 1 }}</span>
              <div style="margin-left: 15px"
                   class="flex">
                <img class="avatar"
                     :src="item.head"
                     alt="" />
                <span class="font-overflow"
                      style="width: 42px">{{
                  item.technicianName
                }}</span>
              </div>
            </div>
          </div>
          <div style="margin-left: 30px"
               class="ele-cell-content"> </div>
          <div style="width: 120px; white-space: nowrap; margin-left: 30px"
               class="ele-text-secondary">
            <span> ￥{{ item.withdrawTotal }}</span>
          </div>
          <div style="width: 80px; white-space: nowrap; margin-left: 60px"
               class="ele-text-secondary">
            <span> ￥{{ item.moneyTotal }}</span>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { jstjEarningsLeaderboard } from '@/api/financialManagement/index';
export default {
  data () {
    return {
      yhtjIncomeList: []
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {
    this.init();
  },
  methods: {
    async init () {
      const res = await jstjEarningsLeaderboard({
        siteId: this.$store.state.site.info.id
      });
      console.log(res);

      this.yhtjIncomeList = res;
    }
  }
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  margin-right: 10px;
}
.one {
  color: red;
}
.two {
  color: #f28733;
}
.ele-cell:not(.ele-cell-align-top) {
  align-items: end;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.marginBottom8 {
  margin-bottom: 6px;
  margin-left: 6px;
  color: #000;
  font-weight: 400;
}
/* 笑脸、哭脸 */
.monitor-face-smile,
.monitor-face-cry {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: #fbd971;
  border-radius: 50%;
  position: relative;
}

.monitor-face-smile > span,
.monitor-face-smile:before,
.monitor-face-smile:after,
.monitor-face-cry > span,
.monitor-face-cry:before,
.monitor-face-cry:after {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: rotate(225deg);
  border: 3px solid #f0c419;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  position: absolute;
  bottom: 8px;
  left: 11px;
}

.monitor-face-smile:before,
.monitor-face-smile:after,
.monitor-face-cry:before,
.monitor-face-cry:after {
  content: '';
  width: 6px;
  height: 6px;
  left: 8px;
  top: 14px;
  border-color: #f29c1f;
  transform: rotate(45deg);
}

.monitor-face-smile:after,
.monitor-face-cry:after {
  left: auto;
  right: 8px;
}

.monitor-face-cry > span {
  transform: rotate(45deg);
  bottom: -6px;
}

/* 圆形进度条组合 */
.monitor-progress-group {
  position: relative;
  display: inline-block;

  .el-progress:not(:first-child) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -1px;
  }

  :deep(.el-progress-circle__track) {
    stroke: hsla(0deg, 0%, 60%, 0.15);
  }
}

.monitor-progress-legends > div + div {
  margin-top: 8px;
}
</style>
